<template>
  <div class="app">
    <!-- 这是导航栏，Navict 是 Vue 组件 -->  
    <div class="nav"><Navict /></div>  
  
    <!-- 使用el-carousel插件，这是一个轮播组件，interval是轮播的时间间隔，4000表示4秒，type是轮播的类型，这里是卡片式，height是轮播的高度 -->  
    <el-carousel :interval="4000" type="card" height="400px">  
      <!-- 这是轮播中的单个项，v-for是用来循环遍历carouseData数组，@click是点击事件，toinfo是方法 -->  
      <el-carousel-item v-for="item in myStore.dataList" :key="item" @click="toinfo(item.pet_id)">  
        <!-- 这是轮播项中的图片，:src是绑定图片的URL，getImageUrl是方法 -->  
        <img :src='item.img' class="img" alt="">  
        <!-- 这是轮播项中的标题 -->  
        <div class="title"><center>{{ item.name }}</center></div>  
      </el-carousel-item>  
    </el-carousel>  
  
    <!-- 这是标题部分 -->  
    <div class="title-s">  
      <!-- 这是标题的左侧部分 -->  
      <div class="t-left">  
        <!-- 欢迎文字 -->  
        <div class="welcome">  
            欢  迎！  
        </div>  
        <!-- 这是描述文字 -->  
        <div class="txt-sl">  
          给爱一个机会，给宠物一个家！<br>  
欢迎来到我们的宠物领养救助平台！这里是一个让爱与关怀汇聚的地方，我们致力于为每一个需要帮助的宠物找到一个温暖的家。  
我们的平台提供了一个便捷的途径，让您能够接触到各种可爱的宠物，包括小猫、小狗、小兔、小鼠等各种动物。我们严格筛选每一个待领养的宠物，确保它们都得到了良好的照顾。  
通过我们的平台，您可以轻松地浏览待领养的宠物信息，了解它们的性格、爱好和健康状况。我们还提供了一系列的工具和服务，帮助您更好地了解宠物的需求和特点，为您的领养做好充分的准备。  
我们的平台还鼓励大家参与到宠物救助的行动中来。您可以捐赠资金、物品或时间，帮助更多的宠物得到救助和领养。我们相信，每一个生命都值得被珍惜和关爱。  
让我们一起行动起来，为需要帮助的宠物提供一个温暖的家！让爱与关怀汇聚在这里，让每一个生命都得到尊重和保护。  
        </div>  
      </div>  
      <!-- 这是标题的右侧部分 -->  
      <div class="t-right">  
        <!-- 这是图片部分 -->  
        <div class="img-up">  
          <img class="img-p" src="../static/home/cat1.jpg" alt="">  
        </div>  
        <!-- 这是另一部分图片 -->  
        <div class="img-down">  
          <div class="img-d">  
            <img class="img-d-p" src="../static/home/dog1.jpg" alt="">  
          </div>  
          <div class="img-d">  
            <img class="img-d-p" src="../static/home/dog2.jpg" alt="">  
          </div>  
        </div>  
      </div>  
    </div> 

    <!-- 这是标题的中部部分 -->  
    <div class="title-m">  
      <!-- 救助宠物的标题部分 -->  
      <div class="rescue-h">  
        <!-- 救助宠物的标题文本 -->  
        <div class="res-t"><center>救助宠物</center></div>  
        <!-- 救助宠物的副标题文本 -->  
        <div class="res-txt"><center>我      们      需     要      你</center></div>  
      </div>  
      <!-- 这是宠物列表部分 -->  
      <div class="pet-lis">  
        <!-- 这是宠物图片列表部分 -->  
        <div class="pet-img-list" v-for="(item,index) in sliceList(myStore.dataList,4)"  :key="index">  
          <!-- 这是单个宠物的信息部分 -->  
          <div class="pet-info" v-for="(items,i) in item" :key="i">  
            <!-- 这是宠物的图片 -->  
            <img :src="items.img" class="pet-img" alt="">  
            <!-- 这是宠物的名称 -->  
            <div class="pet-name">  
              <!-- 这是宠物名称的文本 -->  
              <center class="pet-name-p">我是{{ items.name }}</center><br>  
              <!-- 这是领养按钮的文本和样式 -->  
              <span class="pet-name-p"><center>带我回家吧<br><button @click="toinfo(items.pet_id)" style="width: 100px;height: 50px;border: white solid 1px;margin-top: 20px;background-color: rgba(255,255,255,0);color: white;">领养</button></center></span>  
            </div>  
          </div>  
        </div>  
      </div>  
    </div>

    <div class="nav-b">
       <ButtomNavict />
    </div>
  </div>
</template>

<script setup>
import Navict from './Navict.vue'
import ButtomNavict from './ButtomNavict.vue'
import {useRouter} from "vue-router"
import axios from 'axios'
import { onMounted } from 'vue'
import { useStore } from '../stores/counter'


const router = useRouter()

const myStore = useStore()

function base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
  // 将 Base64 字符串解码为二进制数据
  const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

  // 创建 Blob 对象
  const blob = new Blob([binaryData], { type: mimeType });

  // 通过 URL.createObjectURL 创建 Blob 的 URL
  const blobUrl = URL.createObjectURL(blob);

  return blobUrl;
}

function convertBase64ToBlobUrls(arrayOfObjects) {
  return arrayOfObjects.map(obj => {
    // 检查对象是否包含 img 字段
    if (obj && obj.img) {
      // 将 Base64 字符串转换为 Blob URL
      const blobUrl = base64ToBlobUrl(obj.img);
      
      // 返回新对象，img 字段替换为 Blob URL
      return { ...obj, img: blobUrl };
    } else {
      // 对于没有 img 字段的对象，保持不变
      return obj;
    }
  });
}


// 定义触发操作的方法，在组件挂载后执行
const fetchData = async (url) => {
  try {
    // 发起请求
    const response = await axios.get(url)

    // 更新数据到 Pinia Store
    myStore.updateDataList(convertBase64ToBlobUrls(response.data.result.slice(0, 8)))
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData('http://localhost:8000/pet/pets')
})




//创建一个函数，函数作用是把传入的数据按三的倍数切分为二维数组
function sliceList(list){
  let arr = []
  for(let i = 0;i<list.length;i++){
    if(i%4 === 0){
      arr.push([])
    }
    arr[arr.length-1].push(list[i])
  }
  return arr
}

function toinfo(pet_id){
  router.push({path:"/info",query:{id:pet_id}})
  // console.log(pet_id)
}
</script>


<style scoped>
  .pet-info{
    overflow: hidden;
    width: 350px;
    height: 500px;
    position: relative;
    z-index: 1;
    margin-left: 20px;
    margin-bottom: 10px;
  }
  .pet-img{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .pet-name{
    display: none;
    position: absolute;
    width: 350px;
    height: 500px;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    backdrop-filter: blur(10px);
    /* margin-left: 40px; */
  }
  .pet-info:hover .pet-name{
    display: block;
    /*设置悬停小手 */
    cursor: pointer;
  }
  .pet-info:hover .pet-img{
    transform: scale(1.2);
    transition: all 0.5s;
  }
  .pet-name-p{
    margin-top: 160px;
    color: #fef8ea;
  }
  .pet-img-list{
    width: 100%;
    display: flex;
    justify-content:start;
    margin-top: 10px;
  }
  .rescue-h{
    width: 100%;
  }
  .res-t{
    font-size: 20px;
    color: #03a850;
    font-weight: bold;
  }
  .res-txt{
    font-size: 30px;
    color: black;
    font-weight: bold;
    margin-top: 10px;
  }
  .title-m{ 
    width: 100%;
    background-color: #fef8ea;
    margin-top: 20px;
    margin-left: 10px;
  } 
  .app{
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background-color: #fef8ea;
    /* margin-top: 210px; */
  }
  .nav{
    width: 100%;
    height: 200px;
    margin-bottom: 10px;
  }
  .img{
    width: 100%;
    height: 100%;
  }
  .title{
    position: absolute;
    height: 30px;
    width: 60px;
    background-color: #fef8ea;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 20px;
    color: #03a850;
    margin-top: 170px;
    margin-left: -330px;
    border-radius: 8px;
  }
  .title-s{
    width: 98%;
    /* height: 300px; */
    margin: 0 auto;
    margin-top: 20px;
    /* border: #03a850 1px solid; */
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
  }

  .t-left{
    width: 50%;
  }
  .t-right{
    width: 50%;
  }
  .img-up{
    width: 100%;
    border-radius: 8px;
    /* margin-left: 20px; */
  }
  .img-down{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .img-d{
    width: 49%;
    border-radius: 10px;
  }
  .img-d-p{
    width: 100%;
    height: 280px;
    border-radius: 10px;
  }
  .img-p{
    width: 100%;
    height: 350px;
    border-radius: 10px;
  }
  .welcome{
    font-size: 30px;
    color: #03a850;
    font-weight: bold;
    margin-left: 20px;
  }
  .txt-sl{
    font-size: 18px;
    color: black;
    margin-left: 20px;
    margin-right: 20px;
  }
</style>
